<template>
  <div class="library-container">
    <div class="cards-container">
      <div
        class="card"
        v-for="subject in subjects"
        :key="subject.id"
        @click="createRipple($event, subject)"
      >
        <div
          class="card-icon"
          :style="`background:${subject.color};box-shadow: 0px 4px 8px 0px ${subject.color}`"
        >
          {{ subject.icon }}
        </div>
        <div class="card-text">{{ subject.name }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useAppStore } from "../../stores";

const router = useRouter();
const route = useRoute();
const appStore = useAppStore();

appStore.setAppNav("navTitle", "图书馆");

const subjects = reactive([
  {
    id: 1,
    name: "英语",
    icon: "英",
    color: "#00c09f",
    ripple: false,
    rippleStyle: {},
  },
  {
    id: 2,
    name: "数学",
    icon: "数",
    color: "#ffa84b",
    ripple: false,
    rippleStyle: {},
  },
  {
    id: 3,
    name: "语文",
    icon: "语",
    color: "#71bd63",
    ripple: false,
    rippleStyle: {},
  },
  {
    id: 4,
    name: "古诗",
    icon: "古",
    color: "#765ac6",
    ripple: false,
    rippleStyle: {},
  },
]);

const createRipple = (event, subject) => {
  subject.ripple = true;
  const circle = event.currentTarget.getBoundingClientRect();
  const size = Math.max(circle.width, circle.height);
  const x = event.clientX - circle.left - size / 2;
  const y = event.clientY - circle.top - size / 2;
  subject.rippleStyle = {
    top: y + "px",
    left: x + "px",
    width: size + "px",
    height: size + "px",
  };

  setTimeout(() => {
    subject.ripple = false;
    if (route.query.type == "1") {
      router.push({
        name: "libraryType",
        query: {
          model: subject.id,
        },
      });
    } else {
      router.push({
        name: "library",
        query: {
          model: subject.id,
        },
      });
    }
  }, 600);
};
</script>

<style scoped lang="less">
.library-container {
  background: linear-gradient(
      rgba(255, 255, 255, 0.8),
      /* 这里使用半透明的白色 */ rgba(255, 255, 255, 0.8)
    ),
    url("../../assets/images/home_bg.png"); /* 背景图片路径 */
  background-blend-mode: lighten; /* 使用混合模式 */
}
.cards-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  background: #fff;
  border-radius: 10px;
  width: calc(50% - 10px);
  aspect-ratio: 1 / 1;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  .card-icon {
    width: 60px;
    aspect-ratio: 1 / 1;
    border-radius: 60px;
    line-height: 60px;
    font-size: 26px;
    color: #fff;
  }

  .card-text {
    font-size: 14px;
    font-family: "宋体";
    font-weight: bold;
    margin-top: 10px;
  }
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  transform: scale(0);
  animation: ripple 0.6s linear;
}

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}
</style>
